<template>
	<view>
		<view class='mt_165'>
			<navigator class='userInfos'>
				<view class='userInfo'>
					<image :src='head'></image>
					<view class='ml_20'>
						<view class='userName'>{{name}}<image :src='sex'></image>
						</view>
						<view class='userID'>用户名：{{ID}}</view>
					</view>
				</view>
				<image src='../../static/unfold011.png' class='more'></image>
			</navigator>
			<view class='switchBox'>
				<view>允许使用2G/3G/4G下观看视频</view>
				<switch bindchange="switchChange" />
			</view>
		</view>

		<view class='mt_20'>
			<view class='setList'>
				<view>清除缓存</view>
				<view>30M</view>
			</view>
			<navigator class='setList'>
				<view>评价</view>
				<view>
					<image src='../../static/answer32.png'></image>
				</view>
			</navigator>
			<navigator class='setList'>
				<view>联系我们</view>
				<view>
					<image src='../../static/answer32.png'></image>
				</view>
			</navigator>
			<navigator class='setList'>
				<view>关于我们</view>
				<view>
					<image src='../../static/answer32.png'></image>
				</view>
			</navigator>
		</view>

		<button class='signOut' hover-class="signOut-hover">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				head: '../../static/Candy2x.png',
				name: '李白',
				sex: '../../static/girl01.png',
				ID: 'zyy_18465976458'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.userInfos {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 30rpx;
	}

	.userInfo {
		display: flex;
		align-items: center;
	}

	.userInfo image {
		width: 140rpx;
		height: 140rpx;
	}

	.userName {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
	}

	.userName image {
		width: 19rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.userID {
		font-size: 26rpx;
		color: #757575;
	}

	.more {
		width: 32rpx;
		height: 32rpx;
	}

	.switchBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 30rpx;
		border-top: 1rpx solid #f0f1f1;
	}

	.switchBox view {
		font-size: 30rpx;
	}

	/* switch大小 */
	.wx-switch-input {
		zoom: .7;
	}

	.setList {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		font-size: 30rpx;
		border-bottom: 1rpx solid #f0f1f1;
	}

	.setList view:last-child {
		color: #8A8C8E;
	}

	.setList image {
		width: 24rpx;
		height: 24rpx;
	}

	.signOut {
		position: fixed;
		bottom: 5%;
		left: 5%;
		right: 5%;
		background: #3477E7;
		color: #fff;
	}

	.signOut-hover {
		opacity: 0.8;
	}
</style>
